<template>
  <div>
    <el-form :model="formData" :inline="true">
      <el-form-item>
        <el-input v-model="val" placeholder="查询关键字输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.selectA">
          <el-option
            v-for="item in 12"
            :key="item"
            :label="`${item}月审计结果`"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="
            dialogA = true
            handleSearch()
          "
          >点击查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog title="审计结果查询" :visible.sync="dialogA" width="60%">
      <el-form :model="formDataA" :inline="true">
        <el-form-item label="审计地区">
          <el-input v-model="formDataA.valA" disabled></el-input>
        </el-form-item>
        <el-form-item label="月份">
          <el-input v-model="formDataA.valB" disabled></el-input>
        </el-form-item>
        <el-form-item label="设计总量">
          <el-input v-model="formDataA.valC" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="columnA" label="地区"> </el-table-column>
        <el-table-column prop="columnB" label="审计项"> </el-table-column>
        <el-table-column prop="columnC" label="审计月份"> </el-table-column>
        <el-table-column prop="columnD" label="是否通过"> </el-table-column>
        <el-table-column prop="columnE" label="是否风险"> </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination :total="tableData.length" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      tableData: [
        {
          columnA: '',
          columnB: '1月动力套餐',
          columnC: '2020.1',
          columnD: '是',
          columnE: '否'
        },
        {
          columnA: '',
          columnB: '1月VIP权限开放',
          columnC: '2020.1',
          columnD: '是',
          columnE: '否'
        },
        {
          columnA: '',
          columnB: '1月用户权限新增',
          columnC: '2020.1',
          columnD: '否',
          columnE: '否'
        },
        {
          columnA: '',
          columnB: '1月专线开放权限',
          columnC: '2020.1',
          columnD: '否',
          columnE: '否'
        },
        {
          columnA: '',
          columnB: '1月普通用户短信',
          columnC: '2020.1',
          columnD: '否',
          columnE: '否'
        }
      ],
      val: '',
      dialogA: false,
      formData: {
        selectA: 1
      },
      formDataA: {
        valA: '',
        valB: '1月',
        valC: '21条'
      }
    }
  },

  methods: {
    handleSearch() {
      this.formDataA.valA = this.val
      this.tableData.forEach(item => {
        item.columnA = this.val
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
